<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../Vue.js"></script>
</head>

<body>
    <div class="div">
        <!-- 当一个 <input>, <select>, 或 <textarea> 元素的 value 被修改时，会触发 input 事件。   -->
        <!-- 每当元素的 value 改变，input 事件都会被触发。
             这与 change (en-US) 事件不同。change 事件仅当 value 被提交时触发，如按回车键，从一个 options 列表中选择一个值等 -->
        <input type="text" v-model="value" @input="inputv">
        <ul>

            <!-- includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false
                两个值
                第一个是是否存在
                 fromIndex 可选
                 开始搜索的索引（从零开始）-->

            <template v-for="i in dates">
                <li>{{i}}</li>
            </template>
        </ul>
    </div>
    <script>
        const obj = {
            data() {
                return {
                    value: '',
                    dates: ['胡歌吃饭', '彭于晏边吃饭边演戏', '胡歌边看电视边吃饭', '我看见胡歌和彭于晏了', '我和彭于晏一起合照', '胡歌和彭于晏在演仙剑', '仙剑奇侠传'],
                    // 复制一份虽然可以解决，但是一旦数据过多，就会占内存
                    dates1: ['胡歌吃饭', '彭于晏边吃饭边演戏', '胡歌边看电视边吃饭', '我看见胡歌和彭于晏了', '我和彭于晏一起合照', '胡歌和彭于晏在演仙剑', '仙剑奇侠传']

                }
            },
            methods: {
                inputv() {
                    console.log(this.value);
                    // 这里其实就是一直过滤 this.dates1 然后赋值给  this.dates ， this.dates 会因为 this.dates1 过滤后而改变
                    this.dates = this.dates1.filter(item => item.includes(this.value))
                }
            }
        }
        Vue.createApp(obj).mount('.div')
    </script>
</body>

</html>